<template>
    <div class="b-d">
        <!--<keep-alive include="front">-->

        <router-view />
        <!--</keep-alive>-->
        <div class="tabs">
            <router-link
                v-for="(page, index) in pages"
                :to="{path: page.path}"
                :key="index"
                class="tab"
            >
                <svg class="icon pic" aria-hidden="true">
                    <use :xlink:href="page.src" />
                </svg>
                <div class="tab_text">{{ page.name }}</div>
            </router-link>
        </div>
    </div>
</template>

<script>
    import { mapGetters, mapMutations } from "vuex";

    export default {
        components: {},
        data() {
            return {
                pages: [
                    {
                        name: "推荐",
                        path: "front",
                        src: "#icon-shouye1"
                    },
                    {
                        name: "购物车",
                        path: "cart",
                        src: "#icon-gouwuche2"
                    },
                    {
                        name: "消息",
                        path: "news",
                        src: "#icon-xiaoxi1"
                    },
                    {
                        name: "订单",
                        path: "order-list-new?active=0",
                        src: "#icon-dingdan"
                    },
                    {
                        name: "我的",
                        path: "user",
                        src: "#icon-gerenzhongxinfuzhi"
                    }
                ]
            };
        },
        computed: {},
        methods: {},
        watch: {
            // 监听具体数据变化，并做相应的处理
        },
        beforeCreate() {
            // 可以在这加个loading事件，在加载实例时触发
            // 这个阶段实例的data、methods是读不到的
        },
        created() {
            // 初始化数据，如在这结束loading事件，异步ajax请求也适宜在这里调用
            // 实例创建后：这个阶段已经完成了数据观测(data observer)，属性和方法的运算， watch/event 事件回调。
            // mount挂载阶段还没开始，"el" 属性目前不可见，数据并没有在DOM元素上进行渲染
        },
        beforeMount() {
            // 相关的 render 函数首次被调用。
        },
        mounted() {
            // 挂载元素，获取到DOM节点
            // el选项的DOM节点 被新创建的 vm的el 替换，并挂载到实例上去之后调用此生命周期函数。此时实例的数据在DOM节点上进行渲染
        },
        beforeUpdate() {
            // 数据更新时调用，但不进行DOM重新渲染，在数据更新时DOM没渲染前可以在这个生命函数里进行状态处理
        },
        updated() {
            //  如果对数据统一处理，在这里写上相应函数
            // 这个状态下数据更新并且DOM重新渲染，当这个生命周期函数被调用时，组件 DOM 已经更新，所以你现在可以执行依赖于 DOM 的操作。当实例每次进行数据更新时updated都会执行
        },
        beforeDestroy() {
            // 可以做一个确认停止事件的确认框
        },
        destroyed() {
            // Vue 实例销毁后调用。调用后，Vue 实例指示的所有东西都会解绑定，所有的事件监听器会被移除，所有的子实例也会被销毁
        }
    };
</script>

<style scoped lang="stylus" rel="stylesheet/stylus">
    @import '../assets/main.styl';

    .b-d {
        background: grayE;
        margin-bottom: vw(50);

        .tabs {
            z-index: 99;
            position: fixed;
            display: flex;
            bottom: 0;
            width: 100vw;
            padding: 3vw 0;
            align-items: center;
            background-color: sec-color;
            box-shadow: 0px -4px 15px 0px rgba(0, 0, 0, 0.05);

            .tab {
                width: 20%;
                text-align: center;

                .icon {
                    width: vw(18);
                    height: vw(18);
                    vertical-align: -0.15em;
                    overflow: hidden;
                    fill: tab-icon-color;
                }

                .tab_text {
                    font-size: 10px;
                    color: tab-icon-color;
                    line-height: 1.6;
                }
            }

            .router-link-active {
                .pic {
                    fill: main-color;
                }

                .tab_text {
                    color: main-color;
                }
            }
        }
    }
</style>
